<!DOCTYPE html>
<html>
<head>
<title>Physics Wave Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="250" style="border:0px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Set global drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '18px Times New Roman';
    ctx.textAlign = 'center';
    
    // --- Main Drawing Elements ---

    // 1. Draw the x-axis
    const axisY = 100;
    const axisStartX = 40;
    const axisEndX = 460;
    const axisHeadLen = 10;
    
    ctx.beginPath();
    ctx.moveTo(axisStartX, axisY);
    ctx.lineTo(axisEndX, axisY); // Axis line
    ctx.moveTo(axisEndX, axisY); // Move to end for arrowhead
    ctx.lineTo(axisEndX - axisHeadLen, axisY - 5);
    ctx.moveTo(axisEndX, axisY);
    ctx.lineTo(axisEndX - axisHeadLen, axisY + 5);
    ctx.stroke();
    
    ctx.textAlign = 'left';
    ctx.fillText('x/m', axisEndX + 5, axisY + 6);
    ctx.textAlign = 'center'; // Reset alignment

    // 2. Define and draw points M and N
    const xM = 380;
    const xN = 130;
    const pointRadius = 3;

    // Draw point M
    ctx.beginPath();
    ctx.arc(xM, axisY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = '20px Times New Roman';
    ctx.fillText('M', xM, axisY + 28);

    // Draw point N
    ctx.beginPath();
    ctx.arc(xN, axisY, pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('N', xN, axisY + 28);

    // 3. Draw the distance indicator
    const distLineY = 140;
    const distHeadLen = 10;

    // Draw vertical extension lines
    ctx.beginPath();
    ctx.moveTo(xN, axisY);
    ctx.lineTo(xN, distLineY);
    ctx.moveTo(xM, axisY);
    ctx.lineTo(xM, distLineY);
    ctx.stroke();
    
    // Draw horizontal line for the dimension
    ctx.beginPath();
    ctx.moveTo(xN, distLineY);
    ctx.lineTo(xM, distLineY);
    ctx.stroke();

    // Draw left arrowhead (pointing right, towards center)
    ctx.beginPath();
    ctx.moveTo(xN, distLineY);
    ctx.lineTo(xN + distHeadLen, distLineY - 5);
    ctx.moveTo(xN, distLineY);
    ctx.lineTo(xN + distHeadLen, distLineY + 5);
    ctx.stroke();

    // Draw right arrowhead (pointing left, towards center)
    ctx.beginPath();
    ctx.moveTo(xM, distLineY);
    ctx.lineTo(xM - distHeadLen, distLineY - 5);
    ctx.moveTo(xM, distLineY);
    ctx.lineTo(xM - distHeadLen, distLineY + 5);
    ctx.stroke();
    
    // Distance label
    ctx.fillStyle = 'black';
    ctx.font = '18px Times New Roman';
    ctx.fillText('5 m', (xN + xM) / 2, distLineY - 8);
    
    // 4. Draw the velocity vector 'u'
    const velY = 70;
    const velStartX = 300;
    const velEndX = 200;
    const velHeadLen = 10;
    
    ctx.beginPath();
    ctx.moveTo(velStartX, velY);
    ctx.lineTo(velEndX, velY); // Vector line
    ctx.moveTo(velEndX, velY); // Move to end for arrowhead
    ctx.lineTo(velEndX + velHeadLen, velY - 5);
    ctx.moveTo(velEndX, velY);
    ctx.lineTo(velEndX + velHeadLen, velY + 5);
    ctx.stroke();
    
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('u', velStartX + 10, velY + 7);
    ctx.textAlign = 'center'; // Reset alignment

    // 5. Draw the caption
    ctx.font = '22px "KaiTi", "SimSun"'; // Use common Chinese fonts
    ctx.fillStyle = 'black';
    ctx.fillText('习题 11-6 图', canvas.width / 2, 220);
</script>
</body>
</html>